<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box2{
				margin-top: 10px;
			width: 100px;
			height: 100px;
			background-color: red;
		}
		</style>
	</head>
	<body>
			<div class="box">wusir</div>
			<div id="box2">日天</div>
			<div>alex</div>
	 <ul class="lists">
		<li>
			女友
			<ol>
			    <li>alex</li>
			</ol>
		</li>
		<li class="item">
			<a href="#">alex2</a>
		</li>
		<li class="item2">wusir</li>
		<li>日天</li>
		<li>村长</li>
		<li>小马哥</li>

	</ul>
	<ul class="item3">
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	    <li>4</li>
	</ul>
	<form>
		<input type="text" name="">
		<input type="password" name="">

	</form>
	<div class="box4">
		<p>
			<span class="child">alex</span>
		</p>
		<p>
			<span class="active">alex2</span>
		</p>
		<p class="item5">alex3</p>
		<p>alex4</p>
		<p>alex5</p>
		<div class="child">哈哈哈哈哈</div>
	</div>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function() {
				console.log($('#box2'));
				var odiv = document.getElementById('box2');
				console.log(odiv);
					// js对象==>jquery对象 $(js对象)
				console.log($('odiv'));
					// jquery==>js对象
				console.log($('.box')[0]);
				
				console.log($('div'));
				$('div').click(function(){
//					console.log(this.innerText);
					console.log($(this).text());
				}
			);
			
				console.log($('.box'));
				
				console.log($('.lists li'))
				$('.lists li').css('color','blue');
				$('.item>a').css({
					'color':'yellow',
					'background-color':'red'
				});
//				//紧邻
				$('.item2+li').css('color','green');
//				//兄弟
				$('.item2~li').css('color','purple');
				
				$('.item3 li:eq(0)').css('color','red');
				$('.item3 li:gt(1)').css('color','green');
				$('.item3 li:lt(3)').css('color','purple')
				$('.item3 li:first').css('background-color','green');
				$('.item3 li:last').css('background-color','purple');
				$('.item3 li:odd').css('background-color','red');
				$('.item3 li:even').css('background-color','yellow');
				
				$('input[type=text]').css('color','red');
				$('input[type=password]').css('background','red');
				
				// find(selector)
				// 查找后代 包括子子孙孙
				$('.box4').find('p').css('color','red');
				$('.box4').find('.item5').css('color','green');
					//   在jquery中 叫链式编程
				$('.box4').find('p>.active').css('color','purple').click(function(){
					alert($(this).text());
				});
				console.log($('.box4').children('p').eq(1)[0]);
					// 子代children(selector) 获取的是亲儿子
				$('.box4').children('p').eq(1).css('font-size',40);
				
				
				console.log($('.child').parent()[0]);
			});
			
			
		</script>
	</body>
</html>
